<template>
  <view class="progress-page">
    <!-- 未登录空状态 -->
    <view v-if="!isLogin" class="not-login-wrapper">
      <!-- 顶部固定区域 -->
      <view class="progress-top">
        <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
          <view class="navbar-content">
            <view class="navbar-title">Open signals (0)</view>
          </view>
        </view>
      </view>
      <view class="empty-wrapper">
        <empty-login />
      </view>
    </view>
    
    <!-- 已登录状态 - 信号列表 -->
    <z-paging
      v-else
      ref="paging"
      v-model="signalsData"
      :auto="false"
      :safe-area-inset-bottom="true"
      :auto-full-height="false"
      :default-page-size="10"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      @query="querySignalList"
    >
      <!-- 顶部固定区域 -->
      <template #top>
        <view class="progress-top">
          <!-- 自定义导航栏 -->
          <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="navbar-content">
              <view class="navbar-title">Open signals ({{ totalSignals }})</view>
              <view class="navbar-right" @click="goToPushSetting">
                <image
                  class="notification-icon"
                  src="/static/images/progress/notification-icon.png"
                  mode="aspectFit"
                ></image>
              </view>
            </view>
          </view>

          <!-- 策略选择 -->
          <view class="strategy-selector">
            <view class="selector-box" @click="openStrategyPicker">
              <text class="selector-text">{{ selectedStrategy }}</text>
              <uv-icon name="arrow-down" size="28"></uv-icon>
            </view>
          </view>
        </view>
      </template>

      <!-- 信号列表内容 -->
      <view class="signals-list">
        <view class="signal-item" v-for="(signal, index) in signalsData" :key="index">
        <!-- 第一行：币种 + 交易方向标签 + 百分比 | 时间 -->
        <view class="signal-row-first">
          <view class="row-left">
            <image class="signal-icon" :src="signal.logoUrl" mode="aspectFit"></image>
            <text class="signal-name">{{ signal.symbol }}</text>
            <!-- 异动策略不显示做多/做空标签 -->
            <view class="buy-tag" v-if="shouldShowVipContent && !signal.isAnomalyStrategy" :class="signal.direction === 'LONG' ? 'buy-long' : 'buy-short'">
              {{ signal.directionText }}
            </view>
            <text class="price-change" v-if="shouldShowVipContent" :class="signal.priceChangeClass">
              {{ signal.priceChangeText }}
            </text>
          </view>
          <view class="row-right">
            <text class="signal-time">{{ signal.timeText }}</text>
          </view>
        </view>

        <!-- VIP内容：第二行、第三行、所有详情 - 仅VIP用户可见 -->
        <view class="signal-row-second">
          <view class="row-left">
            <text class="period-info" v-if="shouldShowVipContent" >{{ signal.periodName }}</text>
          </view>
          <view class="row-right">
            <view class="signal-status-box">
              <text class="signal-status">{{ signal.statusText }}</text>
              <image
                class="signal-right-icon"
                src="/static/images/progress/right-icon.png"
                mode="scaleToFill"
              />
            </view>  
          </view>
        </view>
        <template v-if="shouldShowVipContent">
          <!-- 第二行：周期信息 | 状态 -->

          <!-- 第三行：进度条 -->
          <view class="progress-section">
            <view class="progress-wrapper">
              <!-- 标签行（绝对定位在进度条上方） -->
              <view class="progress-labels">
                <!-- 异动策略不显示 SL -->
                <text v-if="!signal.isAnomalyStrategy" class="progress-label" :style="{ left: '0%' }">SL</text>
                <text class="progress-label" :style="{ left: signal.entryPosition + '%' }">Entry</text>
                <text
                  v-for="(target, idx) in signal.gainTargets"
                  :key="idx"
                  class="progress-label"
                  :style="{ left: target.position + '%' }">
                  TP{{ idx + 1 }}
                </text>
              </view>
              
              <!-- 进度条 -->
              <view class="progress-bar">
                <!-- 底层轨道 -->
                <view class="progress-track"></view>

                <!-- Entry - TP 区间填充（由totalGainTarget控制） -->
                <view
                  v-if="signal.entryTargetFillWidth > 0"
                  class="progress-fill entry-target-fill"
                  :style="{
                    left: signal.entryTargetFillStart + '%',
                    width: signal.entryTargetFillWidth + '%'
                  }"
                ></view>

                <!-- 进度点 -->
                <view class="progress-dots">
                  <view
                    v-for="(dot, dotIdx) in signal.progressDots"
                    :key="dotIdx"
                    class="progress-dot"
                    :class="{ active: dot.active }"
                    :style="{ left: dot.position + '%' }"
                  ></view>
                </view>
              </view>

              <!-- 连接线和当前价格显示 -->
              <view class="price-connector" :style="{ left: signal.currentPricePosition + '%' }">
                <view class="connector-line"></view>
                <view class="current-price">{{ signal.currentPrice }}</view>
              </view>
            </view>
          </view>

          <!-- 底部：所有详情 -->
          <view class="signal-footer" @click="goToStrategyDetail(signal)">
            <text class="details-text">所有详情</text>
          </view>
        </template>
        <view v-if="!shouldShowVipContent" class="vip-unlock-banner" @click="goToVipPage">
          <view class="vip-icon">🔒</view>
          <text class="vip-text">解锁VIP并最大化利润</text>
          💎
        </view>
        </view>
      </view>
    </z-paging>

    <!-- 自定义策略选择器 -->
    <custom-picker
      ref="strategyPicker"
      :columns="strategyColumns"
      :default-index="selectedStrategyIndex"
      title="选择策略"
      @confirm="onStrategyConfirm"
      @cancel="onStrategyCancel"
    ></custom-picker>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStrategyType, getProcessingStrategy } from '@/api/tactics'
import CustomPicker from '@/components/custom-picker/custom-picker.vue'
import { getStrategyPushType } from '@/api/tactics'
import { getToken } from '@/utils/auth'
import EmptyLogin from '@/components/empty-login/empty-login.vue'

export default {
  name: 'Progress',
  components: {
    CustomPicker,
    EmptyLogin
  },
  computed: {
    ...mapGetters(['isVip', 'userVip']),
    /**
     * 是否已登录
     */
    isLogin() {
      return !!getToken()
    },
    /**
     * 是否显示VIP内容
     * 如果是VIP用户，或者处于审核模式（showVipCard为false），则显示内容
     */
    shouldShowVipContent() {
      // 如果 showVipCard 为 false，说明在审核中，取消VIP限制（显示所有内容）
      // 如果 showVipCard 为 true，说明是正式上线，需要判断 isVip
      return !this.showVipCard || this.isVip
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      selectedStrategy: '',
      strategyList: [], // 完整的策略数据
      strategyColumns: [], // 自定义picker的列数据
      selectedStrategyIndex: 0, // 选中的策略索引
      selectedStrategyId: null, // 当前选中的策略ID
      totalSignals: 0, // 信号总数
      signalsData: [], // 信号数据列表
      showVipCard: false, // 是否显示VIP卡片
    }
  },
  async onLoad() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight

    // 未登录时不调用接口
    if (!this.isLogin) {
      console.log('Progress页面 - 未登录，不调用接口')
      return
    }

    // 用户信息已在 App.vue 启动时加载，这里不再重复调用
    console.log('Progress页面 - VIP状态:', this.isVip)

    // 获取策略列表（只加载一次，不重置默认策略）
    await this.getStrategyList()
    
    // 获取策略推送类型配置，包括 showVipCard
    await this.getStrategyPushType()
  },

  onShow() {
    // 未登录时不调用接口
    if (!this.isLogin) {
      return
    }
    // 每次页面显示时刷新数据
    if (this.$refs.paging) {
      this.$refs.paging.reload()
    }
  },
  methods: {
    /**
     * 跳转到VIP页面
     */
    goToVipPage() {
      // 如果 showVipCard 为 false，则不跳转
      if (!this.showVipCard) {
        return
      }
      
      uni.navigateTo({
        url: '/subPages/vip/index'
      })
    },
    
    /**
     * 获取策略推送类型配置
     */
    async getStrategyPushType() {
      try {
        const res = await getStrategyPushType()
        console.log('策略推送类型配置:', res)
        
        if (res.code === 200 && res.data) {
          // 从接口返回中获取 showVipCard（可能是 showVip 字段）
          this.showVipCard = res.data.showVipCard || res.data.showVip || false
        }
      } catch (error) {
        console.error('获取策略推送类型配置失败:', error)
        // 失败时默认设置为 false
        this.showVipCard = false
      }
    },
    
    /**
     * 获取策略列表
     */
    async getStrategyList() {
      try {
        const res = await getStrategyType()
        console.log('策略数据:', res)

        // 检查返回数据
        if (res && res.data && res.data.length > 0 && res.data[0].strategies) {
          // 保存完整的策略数据
          this.strategyList = res.data[0].strategies.map(strategy => ({
            id: strategy.id,
            strategyName: strategy.strategyName,
            description: strategy.description,
            // 映射其他字段
            profitRatio: strategy.defaultProfitLossRatio ? `${strategy.defaultProfitLossRatio}%` : '39%',
            totalOrders: strategy.defaultTotalOrder || 387632,
            winRate: strategy.defaultWinRate ? `${strategy.defaultWinRate}%` : '70%',
            annualReturn: strategy.defaultAnnualized ? `${strategy.defaultAnnualized}%` : '30%',
          }))
          
          // 提取策略名称供picker使用
          this.strategies = this.strategyList.map(item => item.strategyName)

          // 构建自定义picker的列数据
          this.strategyColumns = this.strategyList.map((item, index) => ({
            text: item.strategyName,
            value: item.id,
            index: index
          }))

          // 设置默认选中第一个策略
          if (this.strategyList.length > 0) {
            this.selectedStrategy = this.strategyList[0].strategyName
            this.selectedStrategyId = this.strategyList[0].id
            this.selectedStrategyIndex = 0

            // 触发 z-paging 加载数据
            this.$nextTick(() => {
              if (this.$refs.paging) {
                this.$refs.paging.reload()
              }
            })
          }
        } else {
          console.warn('接口返回数据为空')
          uni.showToast({
            title: '暂无策略数据',
            icon: 'none',
            duration: 2000
          })
        }
      } catch (error) {
        console.error('获取策略数据失败:', error)
        uni.showToast({
          title: '获取策略失败',
          icon: 'none',
          duration: 2000
        })
      }
    },

    /**
     * z-paging 查询方法（支持分页）
     */
    async querySignalList(pageNo, pageSize) {
      if (!this.selectedStrategyId) {
        console.warn('未选择策略')
        this.$refs.paging.complete([])
        return
      }

      try {
        // 构建请求参数
        const params = {
          strategyId: this.selectedStrategyId,
          pageNo: pageNo,
          pageSize: pageSize,
        }

        console.log('请求参数:', params)

        const res = await getProcessingStrategy(params)
        console.log('进行中的策略数据:', res)

        if (res && res.data && res.data.records && Array.isArray(res.data.records)) {
          // 更新总信号数 - 使用接口返回的total字段
          this.totalSignals = res.data.total || res.data.records.length

          // 处理每条信号数据
          const processedData = res.data.records.map(record => this.processSignalData(record))

          // 通知 z-paging 数据加载完成
          this.$refs.paging.complete(processedData)
        } else {
          this.totalSignals = 0
          this.$refs.paging.complete([])
        }
      } catch (error) {
        console.error('获取进行中策略失败:', error)
        this.totalSignals = 0
        this.$refs.paging.complete(false)
      }
    },

    /**
     * 获取进行中的策略信号（兼容旧方法）
     */
    async getProcessingSignals() {
      if (this.$refs.paging) {
        this.$refs.paging.reload()
      }
    },

    /**
     * 处理单条信号数据，计算UI所需的各种值
     */
    processSignalData(record) {
      // 判断是否是异动策略（策略ID为13）
      const isAnomalyStrategy = record.strategyId === 13

      // 获取币种图标 - 直接使用接口返回的 logoUrl 字段
      const logoUrl = record.logoUrl || '/static/images/progress/default-coin.png'

      // 解析止盈价格列表
      let gainPrices = []
      try {
        if (!record.gainPrices) {
          gainPrices = []
        } else if (typeof record.gainPrices === 'string') {
          // 如果是字符串，按逗号分隔后转为数字数组
          gainPrices = record.gainPrices
            .split(',')
            .map(price => parseFloat(price.trim()))
            .filter(price => !isNaN(price))
        } else if (Array.isArray(record.gainPrices)) {
          // 如果已经是数组，直接使用
          gainPrices = record.gainPrices.map(price => parseFloat(price))
        }
      } catch (e) {
        console.error('解析gainPrices失败:', e, record.gainPrices)
        gainPrices = []
      }

      // 计算交易方向文本
      const isLong = record.direction === 'LONG'
      const directionText = isLong
        ? `↑ 购买 ${record.openPrice}`
        : `↓ 做空 ${record.openPrice}`

      // 计算价格变化百分比
      const openPrice = parseFloat(record.openPrice) || 0
      const currentPrice = parseFloat(record.currentPrice) || 0
      let priceChangePercent = 0
      if (openPrice > 0) {
        priceChangePercent = ((currentPrice - openPrice) / openPrice * 100).toFixed(1)
      }
      const priceChangeText = `(${priceChangePercent >= 0 ? '+' : ''}${priceChangePercent}%)`
      const priceChangeClass = priceChangePercent >= 0 ? 'price-up' : 'price-down'

      // 计算时间差
      const timeText = this.formatTimeAgo(record.createTime)

      // 状态文本 - 固定显示"正在进行中"
      const statusText = '正在进行中'
      
      // 生成策略标题：币种-周期-做多/做空（异动策略不显示方向）
      const coinSymbol = (record.symbol || '').toUpperCase()  // 币种名称转大写
      const periodName = record.periodName || ''              // 周期名称
      const directionLabel = isLong ? '做多' : '做空'         // 方向标签
      // 异动策略不显示方向
      const strategyTitle = isAnomalyStrategy
        ? `${coinSymbol}-${periodName}`
        : `${coinSymbol}-${periodName}-${directionLabel}`

      // 计算进度条的位置
      const progressData = this.calculateProgress(record, gainPrices, isAnomalyStrategy)

      return {
        id: record.id,
        strategyId: record.strategyId,
        periodId: record.periodId,
        currencyId: record.currencyId,
        isAnomalyStrategy,  // 是否是异动策略
        symbol: record.symbol,
        logoUrl,
        direction: record.direction,
        directionText,
        priceChangeText,
        priceChangeClass,
        timeText,
        periodName: strategyTitle,  // 使用新生成的策略标题
        statusText,
        openPrice: record.openPrice,
        lossPrice: record.lossPrice,
        currentPrice: record.currentPrice,
        gainPrices,
        totalGainTarget: record.totalGainTarget,
        currentGainCount: record.currentGainCount,
        progress: record.progress,
        // 进度条相关数据（两部分独立）
        slEntryFillStart: progressData.slEntryFillStart,
        slEntryFillWidth: progressData.slEntryFillWidth,
        entryTargetFillStart: progressData.entryTargetFillStart,
        entryTargetFillWidth: progressData.entryTargetFillWidth,
        entryPosition: progressData.entryPosition,
        gainTargets: progressData.gainTargets,
        progressDots: progressData.progressDots,
        currentPricePosition: progressData.currentPricePosition,
      }
    },

    /**
     * 计算进度条的位置
     * 第一部分：SL-Entry区间，由progress(-1到1)控制填充（异动策略不显示此部分）
     * 第二部分：Entry-TP区间，由totalGainTarget控制填充到哪个TP
     * TP数量根据接口返回的totalGainTarget字段动态生成，如果没有默认1个
     */
    calculateProgress(record, gainPrices, isAnomalyStrategy = false) {
      // ========== 动态计算所有位置（SL、Entry、TP等分） ==========
      // 根据totalGainTarget字段数量动态生成TP位置，如果没有默认1个
      const totalGainTarget = parseInt(record.totalGainTarget) || 0  // 获取TP数量
      const tpCount = totalGainTarget > 0 ? totalGainTarget : 1  // 如果没有或为0，默认1个TP
      
      // SL、Entry和n个TP应该在0%到95%之间等分
      // 总点数 = SL(1) + Entry(1) + TP(n) = 2 + n
      // 等分间距 = 95 / (总点数 - 1) = 95 / (1 + n)
      const maxTpPosition = 95
      const totalPoints = 2 + tpCount  // SL + Entry + TP数量
      const step = maxTpPosition / (totalPoints - 1)  // 等分间距
      
      // 计算各点位置
      const slPosition = 0  // SL固定在0%
      const entryPosition = step * 1  // Entry在第2个位置
      
      // 生成TP位置数组（从第3个位置开始）
      const targetPositions = []
      for (let i = 0; i < tpCount; i++) {
        const position = step * (2 + i)  // TP1在第3个位置，TP2在第4个位置...
        targetPositions.push(position)
      }
      
      // SL和Entry的中点位置（用于第一部分填充）
      const midPosition = (slPosition + entryPosition) / 2
      
      // 生成TP位置信息（根据totalGainTarget数量动态生成，如果没有默认1个）
      const gainTargets = []
      for (let i = 0; i < tpCount; i++) {
        gainTargets.push({
          price: gainPrices[i] || 0,
          position: targetPositions[i],
          label: `TP${i + 1}`
        })
      }

      // ========== 第一部分：SL-Entry区间的填充逻辑 ==========
      // 由 progress 字段控制，范围 -1 到 1
      // 异动策略不显示此部分（进度一定在 Entry-TP 之间）
      let progress = parseFloat(record.progress) || 0

      // 处理脏数据：超出 -1 到 1 范围的重置为 0
      if (progress > 1 || progress < -1) {
        console.warn(`进度数据异常(${progress})，已重置为0`)
        progress = 0
      }

      let slEntryFillStart = midPosition  // 填充起始位置
      let slEntryFillWidth = 0            // 填充宽度

      // 异动策略不显示 SL-Entry 区间的填充
      if (!isAnomalyStrategy) {
        if (progress < 0) {
          // 负值：从中间点(10%)向左填充到SL方向
          // progress: 0 -> -1 对应填充：从10%向左到0%
          const fillRatio = Math.abs(progress)  // 0到1之间
          slEntryFillStart = midPosition - (midPosition - slPosition) * fillRatio
          slEntryFillWidth = (midPosition - slPosition) * fillRatio
        } else if (progress > 0) {
          // 正值：从中间点(10%)向右填充到Entry方向
          // progress: 0 -> 1 对应填充：从10%向右到20%
          slEntryFillStart = midPosition
          slEntryFillWidth = (entryPosition - midPosition) * progress
        }
        // progress = 0 时，不填充（宽度为0）
      }

      // 第一部分填充数据（限制在0-100范围内）
      const slEntryFillStartPercent = Math.max(0, Math.min(100, slEntryFillStart))
      const slEntryFillWidthPercent = Math.max(0, Math.min(100, slEntryFillWidth))

      // ========== 第二部分：Entry-TP区间的填充逻辑 ==========
      // 由 currentGainCount / totalGainTarget 控制填充进度
      // 如果从来没有止盈过（currentGainCount=0），则不填充此部分
      
      let entryTargetFillStart = entryPosition  // 从Entry开始
      let entryTargetFillWidth = 0              // 填充宽度
      
      const currentGainCount = parseInt(record.currentGainCount) || 0  // 击中多少次止盈点
      
      // 如果已经止盈过，根据 currentGainCount 直接填充到对应的TP位置
      // 例如：4个止盈，击中2次，直接填充到TP2的位置（50%）
      if (currentGainCount > 0 && totalGainTarget > 0 && tpCount > 0) {
        // currentGainCount: 1->TP1, 2->TP2, 3->TP3, ...
        // 直接填充到第currentGainCount个TP的位置
        const targetIndex = Math.min(currentGainCount - 1, tpCount - 1)  // 数组索引（从0开始）
        const targetPosition = targetPositions[targetIndex]
        entryTargetFillWidth = targetPosition - entryPosition  // 直接填满到目标TP位置
      }
      
      // 第二部分填充数据（限制在0-100范围内）
      const entryTargetFillStartPercent = Math.max(0, Math.min(100, entryTargetFillStart))
      const entryTargetFillWidthPercent = Math.max(0, Math.min(100, entryTargetFillWidth))

      // ========== 圆点激活状态 ==========
      // 圆点激活规则：
      // 1. 如果已经止盈过（currentGainCount > 0），根据currentGainCount激活对应的TP点
      // 2. 例如：currentGainCount=2，totalGainTarget=4，则Entry、TP1、TP2都激活
      
      // Entry圆点（当已经止盈过时，Entry就应该激活）
      const entryDot = {
        position: entryPosition,
        active: currentGainCount > 0,  // 只要已经止盈过，Entry就激活
        label: 'Entry'
      }
      
      // 进度点：Entry + TP1-TP5
      const progressDots = [
        entryDot,
        ...gainTargets.map((target, index) => ({
          position: target.position,
          // 如果当前TP的索引小于currentGainCount，则激活
          // 例如：currentGainCount=2，则TP1(index=0)和TP2(index=1)激活
          active: index < currentGainCount,
          label: target.label
        }))
      ]

      // ========== 当前价格指示器位置计算 ==========
      // 根据多空方向和当前价格与开仓价格的关系确定位置
      // 1. 多单(LONG)：当前价格 > 开仓价格 → 在 Entry-TP1 之间
      // 2. 空单(SHORT)：当前价格 < 开仓价格 → 在 Entry-TP1 之间
      // 3. 异动策略：永远在 Entry-TP1 之间
      
      const currentPrice = parseFloat(record.currentPrice) || 0
      const openPrice = parseFloat(record.openPrice) || 0
      const direction = record.direction  // 'LONG' 或 'SHORT'
      
      let currentPricePosition = midPosition  // 默认在 SL-Entry 中点
      
      // 判断价格指示器是否应该在 Entry-TP1 之间
      let isInEntryTpRange = false
      
      if (isAnomalyStrategy) {
        // 异动策略：永远在 Entry-TP1 之间
        isInEntryTpRange = true
      } else if (direction === 'LONG' && currentPrice > openPrice) {
        // 多单：当前价格 > 开仓价格 → 在 Entry-TP1 之间
        isInEntryTpRange = true
      } else if (direction === 'SHORT' && currentPrice < openPrice) {
        // 空单：当前价格 < 开仓价格 → 在 Entry-TP1 之间
        isInEntryTpRange = true
      }
      
      if (isInEntryTpRange && targetPositions.length > 0) {
        // 在 Entry-TP1 之间的中点位置
        const tp1Position = targetPositions[0]
        currentPricePosition = (entryPosition + tp1Position) / 2
      }


      return {
        // 第一部分：SL-Entry区间（progress控制）
        slEntryFillStart: slEntryFillStartPercent,
        slEntryFillWidth: slEntryFillWidthPercent,
        // 第二部分：Entry-Target区间（totalGainTarget控制）
        entryTargetFillStart: entryTargetFillStartPercent,
        entryTargetFillWidth: entryTargetFillWidthPercent,
        // 其他数据
        entryPosition,
        gainTargets,
        progressDots,
        currentPricePosition,
      }
    },

    /**
     * 格式化时间差
     */
    formatTimeAgo(createTime) {
      if (!createTime) return ''

      try {
        const now = new Date().getTime()
        const create = new Date(createTime).getTime()
        const diff = now - create

        const minutes = Math.floor(diff / (1000 * 60))
        const hours = Math.floor(diff / (1000 * 60 * 60))
        const days = Math.floor(diff / (1000 * 60 * 60 * 24))

        if (days > 0) {
          return `${days} 天前`
        } else if (hours > 0) {
          const remainMinutes = minutes % 60
          return remainMinutes > 0 ? `${hours} 小时 ${remainMinutes} 分钟前` : `${hours} 小时前`
        } else if (minutes > 0) {
          return `${minutes} 分钟前`
        } else {
          return '刚刚'
        }
      } catch (e) {
        console.error('时间格式化失败:', e)
        return ''
      }
    },

    /**
     * 打开策略选择器
     */
    openStrategyPicker() {
      // 隐藏 tabbar
      uni.hideTabBar()

      // 打开自定义 picker
      this.$refs.strategyPicker?.open?.()
    },

    /**
     * 取消选择策略
     */
    onStrategyCancel() {
      console.log('取消选择策略')

      // 显示 tabbar
      uni.showTabBar()
    },

    /**
     * 确认选择策略
     */
    async onStrategyConfirm(e) {
      console.log('选择的策略:', e)

      // 显示 tabbar
      uni.showTabBar()

      if (e && e.value && e.value.length > 0) {
        const selectedItem = e.value[0]

        // 更新选中索引
        this.selectedStrategyIndex = e.index[0]

        // 更新选中的策略名称和ID
        this.selectedStrategy = selectedItem.text
        this.selectedStrategyId = selectedItem.value

        console.log('选中策略:', selectedItem)

        // 使用 z-paging 重新加载数据
        if (this.$refs.paging) {
          this.$refs.paging.reload()
        }

        uni.showToast({
          title: `已切换到${selectedItem.text}`,
          icon: 'none',
          duration: 1500
        })
      }
    },

    /**
     * 跳转到推送设置页面
     */
    goToPushSetting() {
      if (!this.selectedStrategyId) {
        uni.showToast({
          title: '请先选择策略',
          icon: 'none',
          duration: 1500
        })
        return
      }

      console.log('跳转到推送设置页面，策略ID:', this.selectedStrategyId)
      
      // 跳转到推送设置页面，传递策略ID
      uni.navigateTo({
        url: `/subPages/push/setting?id=${this.selectedStrategyId}`
      })
    },

    /**
     * 跳转到策略详情页面
     * @param {Object} signal - 信号数据对象
     */
    goToStrategyDetail(signal) {
      if (!signal || !signal.strategyId) {
        console.error('信号数据无效:', signal)
        uni.showToast({
          title: '数据异常，无法查看详情',
          icon: 'none',
          duration: 1500
        })
        return
      }

      console.log('跳转到策略详情页面，信号ID:', signal, '策略ID:', signal.strategyId)

      // 跳转到策略详情页面，传递信号ID
      uni.navigateTo({
        url: `/subPages/tactics/detail?id=${signal.strategyId}&periodId=${signal.periodId || ''}&currencyId=${signal.currencyId || ''}`
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.progress-page {
  min-height: 100vh;
  padding-bottom: 120rpx; // 为底部导航栏留空间
  background-color: #f8f8f8;
}
.progress-top {
  background: url('/static/images/progress/navbar-bg.png') no-repeat;
  background-size: 100% 100%;
}

// 自定义导航栏
.custom-navbar {
  padding-bottom: 20rpx;

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx 0;

    .navbar-title {
      font-size: 36rpx; 
      font-weight: 600;
      color: #333;
    }

    .notification-icon {
      width: 35rpx;
      height: 35rpx;
    }
  }
}

// 策略选择器
.strategy-selector {
  padding: 20rpx 30rpx 30rpx;

  .selector-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 30rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .selector-text {
      font-size: 28rpx;
      color: #333;
    }

    .dropdown-icon {
      width: 24rpx;
      height: 24rpx;
    }
  }
}

// 统计卡片
.stats-container {
  display: flex;
  gap: 20rpx;
  justify-content: space-between;
  padding: 30rpx;

  .stats-card {
    flex: 1;
    padding: 30rpx 20rpx;
    text-align: center;
    background-color: #fff;
    border-radius: 20rpx;

    .stat-period {
      margin-bottom: 10rpx;
      font-size: 32rpx;
      font-weight: 500;
    }

    .stat-trades {
      margin-bottom: 10rpx;
      font-size: 24rpx;
      color: #666;
    }

    .stat-rate {
      font-size: 28rpx;
      font-weight: 600;
      color: #06cbb6;
    }
  }
}

// 信号列表容器（只给数据部分添加 padding）
.signals-list {
  padding: 0 30rpx 30rpx;
}

// 信号卡片
.signal-item {
    padding: 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;

    // 第一行：币种 + 交易方向 + 百分比 | 时间
    .signal-row-first {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15rpx;

      .row-left {
        display: flex;
        align-items: center;
        gap: 12rpx;

        .signal-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }

        .signal-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }

        .buy-tag {
          padding: 6rpx 12rpx;
          font-size: 22rpx;
          color: #fff;
          border-radius: 8rpx;
          
          &.buy-long {
            background-color: #06cbb6;
          }
          
          &.buy-short {
            background-color: #ff6b6b;
          }
        }

        .price-change {
          font-size: 24rpx;
          
          &.price-up {
            color: #06cbb6;
          }
          
          &.price-down {
            color: #ff4757;
          }
        }
      }

      .row-right {
        .signal-time {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    // 第二行：周期信息 | 状态
    .signal-row-second {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .row-left {
        .period-info {
          font-size: 24rpx;
          color: #666;
        }
      }

      .row-right {
        .signal-status-box {
          display: flex;
          align-items: center;
          gap: 8rpx;
          background: #F5F5F5;
          padding: 8rpx 16rpx;
          border-radius: 10rpx;

          .signal-status {
            font-size: 24rpx;
            color: #999;
          }

          .signal-right-icon {
            width: 20rpx;
            height: 20rpx;
          }
        }
      }
    }

    // 进度条部分
    .progress-section {
      margin-bottom: 20rpx;
    }

    // 进度条主容器
    .progress-wrapper {
      position: relative;
      padding-top: 40rpx;  // 为标签预留空间（减小）
      margin-bottom: 70rpx;  // 为价格框预留空间（减小）
    }

    // 标签行（绝对定位在进度条上方）
    .progress-labels {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 32rpx;  // 减小标签高度

      .progress-label {
        position: absolute;
        top: 0;
        font-size: 22rpx;  // 减小字体
        font-weight: 500;
        color: #333;
        transform: translateX(-50%);
      }
    }

    // 进度条
    .progress-bar {
      position: relative;
      overflow: hidden;
      border-radius: 15rpx;  // 减小圆角

      .progress-track {
        height: 28rpx;  // 减小进度条高度
        background: #cdf5f0;
        border-radius: 15rpx;
      }

      // 进度条填充通用样式
      .progress-fill {
        position: absolute;
        top: 0;
        z-index: 1;
        height: 28rpx;  // 减小填充高度
        background-color: #06CBB6;
        transition: width 0.6s ease-out, left 0.6s ease-out;
      }

      .progress-divider {
        position: absolute;
        top: 0;
        z-index: 2;
        width: 4rpx;  // 减小分隔线宽度
        height: 28rpx;  // 减小分隔线高度
        background-color: #06cbb6;
        transform: translateX(-50%);
      }

      .progress-dots {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 28rpx;  // 减小圆点容器高度

        .progress-dot {
          position: absolute;
          top: 50%;
          z-index: 3;
          width: 16rpx;  // 减小圆点大小
          height: 16rpx;
          background: #fff;  // 白色大圆
          border-radius: 50%;
          transform: translate(-50%, -50%);

          // 灰色小圆点（中心）
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8rpx;  // 减小内圆大小
            height: 8rpx;
            background: #c8c8c8;
            border-radius: 50%;
            transform: translate(-50%, -50%);
          }
        }

        // 激活状态：纯白色（去掉灰色小圆点）
        .active {
          background: #fff;

          // 去掉灰色中心点
          &::before {
            display: none;
          }
        }
      }
    }

    // 价格连接器（绝对定位）
    .price-connector {
      position: absolute;
      top: 40rpx;  // 从进度条中心开始（标签40rpx + 进度条高度28rpx的一半14rpx）
      transform: translateX(-50%);

      .connector-line {
        width: 3rpx;  // 减小连接线宽度
        height: 32rpx;  // 减小连接线高度
        margin: 0 auto;
        background-color: #06cbb6;
      }  

      .current-price {
        display: inline-block;
        padding: 4rpx 10rpx;  // 减小内边距
        margin-top: 8rpx;  // 减小上边距
        font-size: 20rpx;  // 减小字体
        font-weight: 600;
        color: #06cbb6;
        white-space: nowrap;
        background-color: #e8f8f5;
        border: 2rpx solid #06cbb6;
        border-radius: 6rpx;  // 减小圆角
      }
    }

    // 底部：所有详情
    // VIP解锁提示横幅
    .vip-unlock-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20rpx 0;
      padding: 16rpx 24rpx;
      background: linear-gradient(135deg, #E8F8F5 0%, #D4F1E8 100%);
      border-radius: 12rpx;
      cursor: pointer;
      transition: all 0.2s ease;
      
      .vip-icon {
        font-size: 28rpx;
      }
        
      .vip-text {
        font-size: 22rpx;
        color: #000;
        margin: 0 5rpx;
      }
    }
    
    .signal-footer {  
      display: flex;
      justify-content: center;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:active {
        background-color: #f8f8f8;
      }

      .details-text {
        font-size: 26rpx;
        color: #999;
        text-align: center;
        transition: color 0.3s ease;
      }

      &:active .details-text {
        color: #06cbb6;
      }
    }
}

/* 未登录包裹器 */
.not-login-wrapper {
  min-height: 100vh;
  background: linear-gradient(180deg, #f0faf9 0%, #ffffff 100%);
}

.empty-wrapper {
  padding: 0 30rpx;
  margin-top: 100rpx;
}
</style>
